<template>
  <div>
    <div>
      <el-radio-group v-model="params.type" @change="init">
        <el-radio-button label="">所有</el-radio-button>
        <el-radio-button label="1">未处理</el-radio-button>
        <el-radio-button label="2">进行中</el-radio-button>
        <el-radio-button label="3">已结束</el-radio-button>
        <el-radio-button :label="user.id">由我解决</el-radio-button>
        <el-radio-button label="4">未分配</el-radio-button>
      </el-radio-group>
    </div>

    <el-table :data="page.records" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="area" label="面积"></el-table-column>
      <el-table-column prop="house" label="装修类型"></el-table-column>
      <el-table-column prop="style" label="风格"></el-table-column>
      <el-table-column prop="createTime" label="时间"></el-table-column>
      <el-table-column prop="phone" label="联系方式"></el-table-column>
      <el-table-column prop="headId" label="责任人">
        <template #default="scope">
          <el-select
              v-model="scope.row.headId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
              @change="update(scope.row)"
          >
            <el-option
                v-for="item in headOptions"
                :key="item.id"
                :label="item.userName"
                :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="进度">
        <template #default="scope">
          <el-select v-model="scope.row.process" @change="update(scope.row)">
            <el-option label="未处理" :value="1"></el-option>
            <el-option label="进行中" :value="2"></el-option>
            <el-option label="已结束" :value="3"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="getHistory(scope.row)" type="primary" style="margin-left: 16px;">
            历史记录
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination layout="total,prev, pager, next" :total="page.total" :page-size="page.size"
                   :current-page.sync="page.current" @current-change="init"></el-pagination>
    <el-drawer
        title="我是标题"
        direction="rtl"
        :visible.sync="drawer">
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>

<script>
import {getJson, postJson} from "@/api/http";
import {Customer_Page, Customer_update, User_getPage} from "@/api/api";
import user from "@/store/user";

export default {
  name: "MessageBoard",
  computed: {
    user() {
      return user
    }
  },
  data() {
    return {
      params: {
        type: '',
      },
      page: {
        current: 1,
        total: 0,
        size: 10,
        records: []
      },
      loading: false,
      headOptions: [],
      drawer: false,
    }
  },
  methods: {
    async init() {
      let data = {
        current: this.page.current,
        size: this.page.size,
        process: this.params.type,
      }
      let result = await getJson(Customer_Page, data)

      if (result.code === 1) {
        this.page = result.data;
      } else {
        this.$message('服务器发生异常');
      }
    },
    async update(row) {
      let result = await postJson(Customer_update, row)
      if (result.code !== 1) {
        this.$message('服务器发生异常');
      }
    },
    async remoteMethod(query) {
      this.loading = true;
      let res = await getJson(User_getPage, {userName: query});
      this.headOptions = res.data.records
      this.loading = false;
    },
    async getHistory(row) {
      this.drawer = true
    },
  },
  created() {
    this.init()
    this.remoteMethod()
  }
}
</script>

<style scoped>
</style>